<template>
	<view class="content">
		<pyh-nv :config="config"></pyh-nv>
		<image :src="baseurl+'association/postHeadBg.png'" class="headBg"></image>
		<input type="text" class="title" placeholder="请输入帖子主题" v-model="title" />
		<springEditor @input="getValue"></springEditor>
		<view class="submit" @click="submit()">
			<text class="label">发布</text>
		</view>
	</view>
</template>

<script>
	import springEditor from "../components/spring-spring-editor/editor.vue"
	export default {
		components: {
			springEditor
		},
		data() {
			return {
				baseurl: this.$baseurl,
				config: {
					title: '发帖',
					bgColor: 'transparent',
					color: '#fff',
				},
				imgList: [],
				urlList: [],
				title: '',
				content: '',
				id: ''
			}
		},
		onLoad(options) {
			// 社群详情
			this.id = options.id;
		},
		methods: {
			getValue(value) {
				this.content = value; // 接收子组件传递的值
			},
			submit() {
				if (this.title == '') {
					this.$u.toast('请输入帖子主题')
					return;
				}
				if (this.content == '') {
					this.$u.toast('请输入帖子主题')
					return;
				}
				this.$request.post('community/addArticle', {
					content: this.content,
					image: JSON.stringify(this.urlList),
					title: this.title,
					community_id: this.id,
				}).then(res => {
					this.$navto.navto('/packageB/post_result/post_result',{id:res.data.code,msg:res.data.msg})
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100vh;
		background-color: #f9f9f9;
	}

	.title {
		width: 645rpx;
		height: 90rpx;
		border-radius: 15rpx;
		margin-left: 35rpx;
		margin-top: 30rpx;
		background-color: #fff;
		padding-left: 35rpx;
	}

	.headBg {
		width: 100%;
		height: 220rpx;
	}

	.pyh-nv-box {
		position: absolute !important;
	}

	.content {
		width: 100%;
		height: 100vh;
		background-color: #f9f9f9;
		display: flex;
		flex-direction: column;
		overflow-y: scroll;

		.logo {
			width: 110rpx;
			height: 36rpx;
			margin-top: 52rpx;
			margin-left: 267rpx;
		}

		.submit {
			width: 490rpx;
			height: 95rpx;
			background: #4E97AD;
			border-radius: 15rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 100rpx;
			/* margin-bottom: 150rpx; */
			margin-left: 130rpx;

			.label {
				font-size: 28rpx;
				color: #fff;
			}
		}


		.uploadTitle {
			margin-top: 16rpx;
			margin-left: 40rpx;
			font-size: 28rpx;
		}

		.rate {
			margin-left: 20rpx;
			margin-top: 40rpx;
		}

		.textAera {
			margin-left: 35rpx;
			margin-top: 20rpx;
			width: 610rpx;
			height: 740rpx;
			padding: 35rpx;
			border-radius: 15rpx;
			font-size: 28rpx;
			background-color: #fff;
		}

		.imgBox {
			width: 620rpx;
			margin-top: 22rpx;
			margin-left: 40rpx;
			display: flex;
			flex-wrap: wrap;

			.chooseImage,
			.selectInfo {
				position: relative;
				width: 190rpx;
				height: 190rpx;
				border: 1px solid #cccccc;
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-right: 10rpx;
				margin-bottom: 10rpx;
				background-color: #fff;
				border-radius: 15rpx;

				.choose {
					width: 100%;
					text-align: center;
					font-size: 60rpx;
				}

				.close,
				.del {
					position: absolute;
					top: -11rpx;
					right: -11rpx;
					width: 22rpx;
					height: 22rpx;
				}
			}

			.selectedImg {
				position: relative;
				width: 190rpx;
				height: 190rpx;
				border-radius: 15rpx;
			}
		}


		.goodsBox {
			position: relative;
			width: 646rpx;
			height: 260rpx;
			display: flex;
			flex-direction: column;
			background-color: #F8F8F8;
			margin-top: 45rpx;
			margin-left: 52rpx;

			.title {
				margin-top: 16rpx;
				margin-left: 20rpx;
				font-size: 22rpx;
				font-weight: bold;
				color: #333333;
			}

			.line {
				margin-left: 20rpx;
				margin-top: 16rpx;
				width: 603rpx;
				height: 0;
				border-bottom: 1rpx dotted #333333;
			}

			.goodsImg {
				width: 140rpx;
				height: 140rpx;
				margin-top: 35rpx;
				margin-left: 21rpx;
			}

			.goodsName {
				position: absolute;
				width: 419rpx;
				left: 227rpx;
				top: 90rpx;
				font-size: 24rpx;
				color: #333333;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
			}

			.goodsNum {
				position: absolute;
				width: 419rpx;
				left: 227rpx;
				top: 149rpx;
				font-size: 20rpx;
				color: #8E8E8E;
			}

			.goodsPrice {
				position: absolute;
				width: 419rpx;
				left: 227rpx;
				top: 202rpx;
				font-size: 20rpx;
				color: #C84D38;
			}

			.numBox {
				position: absolute;
				left: 435rpx;
				top: 198rpx;
			}
		}

	}
</style>